<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>redis</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
<!-- <script src="/power.js"></script>
<script>
POWERMODE.colorful = true; /* make power mode colorful*/
POWERMODE.shake = true; /* turn off shake*/
document.body.addEventListener('input', POWERMODE);
</script> -->
  </head>
  <body>

<!-- 主区域 -->
  <div class="layui-container layui-col-space10"  style="width: 100%;height: 100%;">
      <!-- 列表及数据区域 -->
      <div class="layui-row layui-col-space10 layui-row-space10"  style="height: 700px;">
          <!-- 列表 -->
      <div class="layui-col-md3" style="background-color: #2F4056;">
          <!-- 选择数据库区域 -->
          <div id= "naav">
            <ul>
                    <li style="float:left;margin:5px">
                            <a class="layui-btn" v-on:click="showSub = !showSub">更换数据库</a>
                            <dl style="position:absolute;" v-if="showSub">
                                    <dd class="layui-btn layui-bg-black"
                                        v-for="db in dbs"
                                        v-on:click="changeDB(db)">
                                        {{ db }}</dd>
                            </dl>
                    </li>
                    <li style="float:left;margin:5px"><button class="layui-btn" v-on:click="refreshKeys">
                            刷新
                        </button>
                    </li>
                    <ts></ts>
              </ul>
            </div>
<!-- 主列表 -->
          <div id="key-list">
              <input v-model="filter" style="width:100%;overflow: auto;">
                <ul style="overflow: auto;height: 800px">
                  <li
                      is="key-item"
                      v-for="(key, index) in filted"
                      v-bind:key="key.type"
                      v-bind:name="key.name"
                      v-on:remove="remove(key.name)"
                      v-on:get="getKey(key.name)"
                      ></li>
              </ul>
          </div>
      </div>
      <!-- 数据区域 -->
      <div class="layui-col-md9 layui-bg-green" style="height: 700px;">
          <!-- 选项卡区域 -->
          <div class="layui-tab" id="mainTab" lay-filter="tab">
          <ul class="layui-tab-title">
      <li
          is="key-tab"
          v-for="(v,key) in keys"
          v-bind:name="v.name"
          v-bind:size="v.size"
          v-bind:ttl="v.ttl"
          v-bind:cmd="v.cmd"
          v-bind:index="key"
          v-on:edit="edit"
          v-on:remove="keys.splice(key,1)"
          v-on:refresh="refresh(v.name)"
          v-on:setttl="setttl"
          ></li>
          </ul>
          <!-- 数据显示区域 -->
          <div class="layui-tab-content">
      <div
          is="key-info"
          v-for="(key, index) in keys"
          v-bind:context="key.data"
          ></div>
          </div>

      </div>
      </div>
<!-- 命令行 -->
      <div class="layui-col-md9" id="exec" style="width: 70%;">
          <!-- 输入区 -->
        <input v-model="cmd"
               style="background-color: #d2d2d2;width: 100%;"
               v-on:keyup.enter="exec"
               placeholder="exec command"
               >
               <!-- 输出区 -->
               <textarea id="t_result" style="background-color: #d2d2d2;width: 100%;height: 150px;" v-model="result"
               placeholder="result will show here"
               >
               </textarea>
      </div>
      </div>
  </div>
  <!-- layui 主要用选项卡样式及弹出提示 -->
  <script src="./layui/layui.js"></script>
  <!-- 主要实现使用了Vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 数据请求js -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- js实现 -->
  <script src="./common.js"></script>
  </body>
  </html>
